<template>
  <div class="duty-content">
    <!-- 上面表单部分 -->
    <el-form ref="formData" :inline="true" class="form-container">
      <el-row style="width: 100%" type="flex">
        <el-col>
          <el-form-item label="线路编号:" prop="number">
            <el-input
              v-model="formData.number"
              placeholder="请输入线路编号"
              style="width: 250px"
            />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="线路名称:" prop="name">
            <el-col><el-input
              v-model="formData.name"
              placeholder="请输入线路名称"
              style="width: 250px"
            /></el-col>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="起始机构:" prop="startOrganId">
            <el-select
              v-model="formData.startOrganId"
              placeholder="请选择起始机构"
              style="width: 250px"
            >
              <el-option v-for="item in organizationList" :key="item.type" :label="item.name" :value="item.type" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第2行 -->
      <el-row style="width: 100%" type="flex">
        <el-col>
          <el-form-item label="目的地机构:" prop="endOrganId">
            <el-select
              v-model="formData.endOrganId"
              placeholder="请选择目的地机构"
              style="width: 250px"
            >
              <el-option label="" value="0" />
              <el-option label="" value="1" />
              <el-option label="" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button
              type="primary"
              class="btn btn1"
              @click="search"
            >搜索</el-button>
            <el-button class="btn" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 下面列表部分 -->
    <el-card>
      <el-button class="tablebtn" type="primary" size="mini" @click="showDialog=true">新增线路</el-button>
      <el-button class="tablebtn" type="primary" size="mini" @click="costDialog=true">成本设置</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#f8faff', color: '#818693' }"
      >
        <el-table-column label="线路编号" width="170" prop="number" />
        <el-table-column label="线路名称" width="170" prop="name" />
        <el-table-column label="线路类型" width="170" prop="type">
          <template v-slot="{row}">
            <span v-if="row.type===1">干线</span>
            <span v-else-if="row.type===2">支线</span>
            <span v-else-if="row.type===3">接驳路线</span>
          </template>
        </el-table-column>
        <el-table-column label="起始地机构" width="120" prop="startOrganName" />
        <el-table-column label="目的地机构" width="120" prop="endOrganName" />
        <el-table-column label="距离（千米）" width="120" prop="distance" />
        <el-table-column label="成本（元）" width="130" prop="cost" />
        <el-table-column label="预计时间（分钟）" width="140" prop="time" />
        <el-table-column label="操作" width="180">
          <template>
            <el-button type="text" size="small" @click="revampDialog=true">修改</el-button>
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small">增加车次</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center" style="height:60px" align="middle">
        <el-pagination
          :current-page="+requestParameters.size"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="59"
        />
      </el-row>
    </el-card>
    <!-- 放置弹层组件 -->
    <add-transport :show-dialog.sync="showDialog" @click="addtransport" />
    <cost-transport :cost-dialog.sync="costDialog" @click="costtransport" />
    <revamp-transport :revamp-dialog.sync="revampDialog" @click="revamptransport" />
  </div>
</template>

<script>
import { transportLine } from '@/api/Transport-interface'
import AddTransport from './components/add-transport.vue'
import CostTransport from './components/cost-transport.vue'
import RevampTransport from './components/revamp-transport.vue'
export default {
  name: 'Transportindex',
  components: { AddTransport, CostTransport, RevampTransport },
  data() {
    return {
      Listdata: {
        endOrganId: null,
        page: 1,
        pageSize: 10,
        startOrganId: null
      },
      tableData: [],

      requestParameters: {
        size: 1,
        pagesize: 10
      },
      showDialog: false,
      costDialog: false,
      revampDialog: false,
      deptForm: {
        number: '',
        name: '',
        type: '',
        startOrganName: '',
        endOrganName: ''

      },
      formData: {
        number: '',
        name: '',
        startOrganId: '',
        endOrganId: ''

      }
    }
  },
  created() {
    this.transportLine()
  },
  methods: {
    async transportLine() {
      const { items } = await transportLine(this.Listdata)
      this.tableData = items
      // console.log(this.tableData)
    },
    addtransport() {
      this.showDialog = true // 点击显示弹层
    },
    costtransport() {
      this.costDialog = true // 点击显示弹层
    },
    revamptransport() {
      this.revampDialog = true
    },
    // 搜索
    async search() {
      const { items } = await transportLine({ number: this.formData.number, name: this.formData.name, startOrganId: this.formData.startOrganId })
      this.tableData = items
      console.log(items)
    },
    // 重置
    reset() {
      this.formData.number = this.formData.name = this.formData.startOrganId = ''
    }
    // handleClick(row) {
    //   console.log(row)
    // }
  }

}

</script>

<style lang="scss" scoped>
.duty-content {
  margin: 15px 20px;
  // height: 2000x !important;

  // 表单
  .form-container {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    margin-bottom: 30px;

    .btn {
      margin-right: 20px;
      padding: 10px 20px;
    }
    .btn1 {
      background-color: #e15536;
      border: 1px solid #e15536;
      margin-left: -200px;
    }
   }
  .tablebtn {
    background-color: #e15536;
    border: 1px solid #e15536;
    margin-bottom: 20px;
  }
  }
  //表格分页
  .el-pagination {
    padding: 25px;
    display: flex;
    justify-content: center;
  }
.input80{
  width: 80%;
}
</style>
